<template>
  <div style="display: inline-block;">
    <el-popover ref="popover" v-model="visible" :width="width" :placement="placement">
      <p><slot name="message">确定要删除吗？</slot></p>
      <div style="text-align: center; margin: 0">
        <el-button size="mini" plain @click="handlerCancel">取消</el-button>
        <el-button size="mini" type="primary" @click="handlerOk">确定</el-button>
      </div>
    </el-popover>
    <span v-popover:popover>
      <slot />
    </span>
  </div>
</template>
<script>
export default {
  name: 'Delete',
  props: {
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'text'
    },
    placement: {
      type: String,
      default: 'top'
    },
    width: {
      type: String,
      default: '140'
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handlerCancel() {
      this.visible = false
      this.$emit('cancel')
    },
    handlerOk() {
      this.visible = false
      this.$emit('confirm')
    }
  }
}

</script>
<style lang="scss" scoped>
.col-text{
  margin-left: 5px;
}
</style>
